<template>
  <div class="base">
    <!-- 顶部 -->
    <div class="person-top">
      <van-image
        round
        width="60px"
        height="60px"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <div class="p-right" @click="loginClick">
        <span>{{user.nickname}}</span>
        <van-icon name="comment" />
      </div>
    </div>

    <!-- 中间 -->
    <div class="person-main">
      <div class="box_1">
        <div class="box-show">
          <span>{{user.orderCount}}</span>
          <p class="d-texe">我的订单</p>
        </div>
        <div class="box-show" @click="focusClick">
          <span>{{user.myAttention.length}}</span>
          <p class="d-texe">我的关注</p>
        </div>
        <div class="box-show" @click="moneyClick">
          <span>{{user.balance}}.00</span>
          <p class="d-texe">我的余额</p>
        </div>
      </div>
      <van-cell
        title="我的优惠券"
        @click="discountsClick"
        icon="coupon-o"
        color="#6973e1"
        is-link
      />
      <van-cell
        title="我的推广"
        @click="spreadClick"
        icon="gold-coin-o"
        is-link
      />
      <van-cell
        title="帮助与反馈"
        @click="helpClick"
        icon="comment-o"
        is-link
      />
      <van-cell title="设置" @click="setClick" icon="setting-o" is-link />
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  
  computed:{
    user(){
      return this.$store.state.user
    }

  },
  methods: {
    //点击事件：未登录时
    loginClick(e){
      if (e.target.nodeName == "SPAN" && e.target.innerHTML == "立即登录"){
        this.$router.push('/login')
      }
    },
    //判断是否登录（缓存后是有token值的）
    //如果有token值则跳转个人中心页面，否则跳转返回登录
    focusClick() {
      this.$router.push(this.$store.state.user.token?`/person/focus/${this.$store.state.user.myAttention}`:'/login');
    },
    moneyClick() {
      this.$router.push(this.$store.state.user.token?"/person/money":'/login');
    },
    discountsClick() {
      this.$router.push(this.$store.state.user.token?"/person/discounts":'/login');
    },
    spreadClick() {
      this.$router.push(this.$store.state.user.token?"/person/spread":'/login');
    },
    helpClick() {
      this.$router.push(this.$store.state.user.token?"/person/help":'/login');
    },
    setClick() {
      this.$router.push(this.$store.state.user.token?"/person/set":'/login');
    },
  },
};
</script>

<style lang="scss" scoped>
.base {
  z-index: 1;
  background-color: #f2f2f2;
  .person-top {
    border-width: 0px;
    width: 375px;
    height: 192px;
    background-color: rgba(102, 110, 232, 1);
    display: flex;
    .van-image {
      position: relative;
      top: 40px;
      left: 39px;
    }
    .p-right {
      width: 250px;
      height: 60px;
      padding-top: 10px;
      margin-left: 10px;
      position: relative;
      top: 40px;
      left: 39px;
      color: white;
      font-size: 20px;
      span {
        float: left;
        font-weight: 500;
      }
      .van-icon {
        margin-top: 5px;
        float: right;
      }
    }
  }
  .person-main {
    border-width: 0px;
    width: 375px;
    height: 327px;
    background: white;
    .box_1 {
      border-width: 0px;
      position: relative;
      top: -30px;
      width: 335px;
      height: 92px;
      margin: 0 auto;
      background: white;
      border-radius: 10px;
      box-shadow: 2px 2px 2px 2px #f2f2f2;
      display: flex;
      justify-content: space-between;
      .box-show {
        width: 30%;
        height: 72px;
        margin-top: 20px;
        text-align: center;
        span {
          font-weight: 500;
          font-size: 20px;
        }
        .d-texe {
          font-size: 13px;
          color: #9a9a9a;
          margin: 10px 0;
        }
      }
    }
  }
}
</style>